<template>
    <section>
        <goback :getName='goName'></goback>
        <!-- <div v-show="ifShowRule" class="detailRule" ref="detailRule" :style="{height: detailRuleHeight}">
            <img src="../../assets/mall/gzdt.png">
            <div class="ruleInfo">
                <div class="ruleTitle">规则说明</div>
                <div class="ruleContent">
                    <p class="ruleNum">一、参与规则</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span> 1、选择心仪商品立即购买。。</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span> 2、购买成功后次日起，可在【我的】页面中对该商品进行打卡。</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span> 3、同一商品在打卡进行时，不可重复参与该商品的【打卡送礼】活动。</p>
                    <p class="ruleNum">二、 打卡结果及奖励</p>
                    <p class="ruleNum">&nbsp;&nbsp;&nbsp; 1、打卡成功</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span>
                        购买商品后，在规定时间内完成该商品打卡次数要求，视为打卡成功。即可在3日内在【我的】中免费领取该商品。</p>
                    <p class="ruleNum">&nbsp;&nbsp;&nbsp; 2、打卡失败</p>
                    <p><span class="ruleNum">&nbsp;&nbsp;&nbsp;</span>购买商品后，在规定时间内未完成该商品的打卡要求，视为打卡失败。</p>
                </div>
                <div class="closeBtn">
                    <img src="../../assets/mall/gzgb.png" @click="closeRule">
                </div>
            </div>
        </div>
        <div class="top-img">
            <img src="../../assets/jmjs/banner.png">
            <div class="rule-img" @click="rule">
                <img src="../../assets/jmjs/hdgz.png">
            </div>
        </div> -->
        <div class="shadow" v-if="showShadow" @click="hiddenShadow"></div>
        <div class="image">
            <div class="good-img">
                <img :src="goods.imgSrc">
                <div class="title">{{goods.name}}</div>
            </div>
            <!-- 缩略图 -->
            <div class="img_small">
                <span v-for="(img,index) of goods.imgs" :class="{'active':index===mark}" @click="change(img,index)" :key="index">
                    <img :src="img">
                </span>
            </div>
            <div class="goods-info">
                <span class="time">购买成功后<span class="red">&nbsp;{{dkCycle}}日&nbsp;</span>内，累计打卡<span class="red">&nbsp;{{dkFrequency}}次&nbsp;</span>即送<span class="red">&nbsp;1{{productUnit}}。</span></span>
            </div>
        </div>
        <div class="content">
            <div class="commodity-info">商品信息</div>
            <div class="detail">
                <div class="detail-info">
                    <div>
                        <span class="detail-title">名称：</span>
                        <span>{{goods.name}}</span>
                    </div>
                    <div>
                        <span class="detail-title">规格：</span>
                        <span>{{goods.specifications}}</span>
                    </div>
                    <div>
                        <span class="detail-title">信息：</span>
                        <span>{{goods.information}}</span>
                    </div>
                </div>
                <div class="detail-img" v-for="(img,index) of goods.bigimg" :key="index">
                    <img :src="img" v-preview="img">
                </div>
            </div>
        </div>
        <dl class="buy">
            <dd class="buyNow" @click="buyNow">立即购买</dd>
        </dl>
        <transition name="skuInfos">
            <div class="skuInfos" v-if="isShow">
                <div class="selectSpecifications">
                    <div class="specifications">
                        <span class="skuInfoTitle">规格</span>
                        <div class="all-specifications">
                            <span v-for="(spe,index) of goods.specificationsCart" :key="index" :class="{'selected':index===option}"
                                @click="select(index)">{{spe}}</span>
                        </div>
                    </div>
                    <div class="specifications">
                        <span class="skuInfoTitle">数量</span>
                        <div class="all-specifications immutableCount">
                            <span>{{buyCount}}</span>
                        </div>
                    </div>
                </div>
                <span class="confirmInfos" @click="confirm">确定</span>
            </div>
        </transition>
        <lg-preview></lg-preview>
    </section>
</template>
<script>
    import { Indicator } from 'mint-ui'
    import goback from '../../components/goback'
    import { getClassifyInfos, getDkslProduct } from '../../libs/interface'
    import { userInfoGet, WXShare } from '../../libs/publicMethod'
    export default {
        components: { goback, getClassifyInfos, userInfoGet, WXShare, getDkslProduct, Indicator },
        data() {
            return {
                userInfo: userInfoGet(),
                goName: '即买即送',
                detailRuleHeight: '',
                // ifShowRule: false,
                mark: 0, //缩略图下标
                imgSrc: '', //商品图片
                goods: {},
                buyCount: 0,
                dkCycle: 0,
                dkFrequency: 0,
                productUnit: '',
                option: '',  //选择的规格
                isShow: false,  //选择规格
                showShadow: false,  //选择规格时显示阴影
            }
        },
        methods: {
            // closeRule() {
            //     this.ifShowRule = false
            // },
            // rule() {
            //     let vm = this
            //     vm.ifShowRule = true
            //     vm.detailRuleHeight = document.documentElement.clientHeight - 38 + 'px'
            // },
            change(i, m) {
                this.goods.imgSrc = i
                this.mark = m
            },
            hiddenShadow() {
                let vm = this
                if (!vm.isShow || !vm.showShadow) return
                vm.isShow = false
                vm.showShadow = false
            },
            buyNow () {
                let vm = this
                vm.isShow = true
                vm.showShadow = true
            },
            select(s) {
                this.option = s
            },
            confirm () {
                let vm = this
                if (vm.goods.specificationsCart.length && vm.option.length === 0) {
                    vm.$toast('请选择规格')
                    return
                }
                sessionStorage.removeItem('jmjs')
                // vm.$router.push('/jmjsPay/'+ vm.goods.skuid[vm.option] + '/' + vm.buyCount)
                location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx163c4c3d188f8ee5&redirect_uri=http%3A%2F%2Fwww.xiewan8.com%2FlyApp%2F%23%2FjmjsPay%2F' + vm.goods.skuid[vm.option] + '%2F' + vm.buyCount + '&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect'
            },
            
        },
        mounted() {
            let vm = this
            document.body.style.paddingBottom = '47px'
            Indicator.open({
                text: '加载中...',
                spinnerType: 'fading-circle'
            })
            let params = {
                productId: vm.$route.params.id,
                memberId: vm.userInfo.id
            }
            getClassifyInfos(params, (data) => {
                if (data.code === 1) {
                    vm.goods = data.payload
                    vm.goods.name = data.payload.product.name
                    vm.goods.bigimg = data.payload.sku.bigimg.split(',')
                    vm.goods.imgs = data.payload.product.banner.split(',')
                    vm.goods.imgSrc = vm.goods.imgs[0]
                    vm.goods.specifications = ''
                    vm.goods.specificationsCart = []
                    vm.goods.skuid = []
                    data.payload.product.skuInfos.forEach(element => {
                        vm.goods.specifications += element.skuName + ' '
                        vm.goods.specificationsCart.push(element.skuName)
                        vm.goods.skuid.push(element.skuId)
                    })
                    vm.goods.information = data.payload.sku.skuProperties
                    let params = {
                        productId: vm.$route.params.id,
                        limit: 1,
                        offset: 0,
                        sidx: '',
                        sord: '',
                    }
                    getDkslProduct(params, (data) => {
                        if (data.code === 1) {
                            Indicator.close()
                            vm.buyCount = data.payload[0].buyCount
                            vm.dkCycle = data.payload[0].dkCycle
                            vm.dkFrequency = data.payload[0].dkFrequency
                            vm.productUnit = data.payload[0].productUnit
                        } else {
                            vm.$toast('系统异常')
                        }
                    })
                } else {
                    vm.$toast('系统异常')
                }
            })
        },
    }
</script>
<style scoped>
/* .detailRule{
    position: absolute;
    margin: auto;
    top: 2.4rem;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(0, 0, 0, .65)
}
.detailRule img{
    margin-top: 5%;
    width: 80%;
    height: 90%;
}
.ruleInfo{
    margin-top: 5%;
    width: 80%;
    height: 90%;
    position: absolute;
    top: -1%;
    right: 0;
    bottom: 0;
    left: 1%;
    margin: auto;
}
.ruleTitle{
    font-size: .95rem;
    color: #F2F2F4;
}
.ruleContent{
    margin: 12% auto 0;
    width: 80%;
    height: 71%;
    margin-bottom: 2%;
    overflow: auto;
    font-size: .8rem;
    line-height: 1.5rem;
    text-align: left;
}
.ruleNum{
    font-weight: bold;
}
.closeBtn{
    position: relative;
    z-index: 10;
    width: 100%;
    margin: auto;
    -moz-box-shadow: 0rem -2rem 2rem -.3rem rgb(255, 255, 255); 
    -webkit-box-shadow: 0rem -2rem 2rem -.3rem rgb(255, 255, 255); 
    box-shadow: 0rem -2rem 2rem -.8rem rgb(255, 255, 255); 
}
.closeBtn img{
    width: 80%;
    height: 100%;
}
.top-img{
    width: 100%;
    position: relative;
}
.top-img img{
    display: block;
    width: 100%;
}
.rule-img{
    position: absolute;
    top: 0;
    right: 0;
    width: 5rem;
}
.rule-img img{
    width: 100%;
    height: 100%;
} */
.shadow{
    width: 100%;
    height: 100%;
    z-index: 7;
    position: fixed;
    top: 0;
    background-color: rgba(0,0,0,.5);
}
.image{
    background-color: #fff;
}
.good-img{
    width: 100%;
    /* height: 21rem; */
    height: 18rem;
    position: relative;
}
.good-img img{
    width: 100%;
    height: 100%;
}
.title{
    background: rgba(45, 45, 45, .7);
    color: #fff;
    height: 2.5rem;
    line-height: 2.5rem;
    position: absolute;
    width: 96%;
    bottom: 0;
    font-size: .8rem;
    text-align: left;
    padding-left: 4%;
}
.img_small{
    display: flex;
    justify-content: center;
    white-space: nowrap;
    overflow: auto;
}
.img_small span{
    display: inline-block;
    width: 4rem;
    height: 3rem;
    margin: .2rem;
    border: 1px solid #fff;
    box-sizing: border-box;
}
.img_small img{
    width: 100%;
    height: 100%;
}
.img_small .active{
    border: 1px solid #C91F16;
}
.goods-info{
    text-align: left;
    margin-left: 1rem;
    padding-bottom: .15rem;
}
.goods-info span{
    display: inline-block;
    color: #333;
    font-size: .7rem;
}
.goods-info .red{
    color: #C91F16;
}
.goods-info>span{
    margin: .3rem 0;
}
.content{
    margin-top: .6rem;
    background-color: #fff;
    text-align: left;
}
.commodity-info{
    height: 2.2rem;
    line-height: 2.5rem;
    margin: 0 1rem;
    font-size: .8rem;
    border-bottom: 1px solid #DEDEDE;
}
.detail-info{
    padding-top: .7rem;
    font-size: .7rem;
    line-height: 1.4rem;
    color: #333;
    margin: 0 .8rem;
}
.detail-title{
    font-weight: bold;
}
.detail-img{
    width: 100%;
    display: inline-block;
    margin-top: .8rem;
    text-align: center;
}
.detail-img img{
    width: 94%;
    height: 100%;
    border-radius: 1rem;
    -moz-box-shadow: 0rem 1rem 2.5rem 0rem rgba(185,182,168,0.5); 
    -webkit-box-shadow: 0rem 1rem 2.5rem 0rem rgba(185,182,168,0.5); 
    box-shadow: 0rem 1rem 2.5rem 0rem rgba(185,182,168,0.5); 
}
.buy{
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
}
.buyNow{
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    background: linear-gradient(0deg,rgba(226,35,25,1),rgba(253,55,8,1));
    -moz-box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    -webkit-box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    color: #fff;
    font-size: 1.05rem;
}
.skuInfos{
    width: 100%;
    background-color: #fff;
    -moz-box-shadow: 0rem 1rem 2.5rem 0rem rgba(185,182,168,0.5); 
    -webkit-box-shadow: 0rem 1rem 2.5rem 0rem rgba(185,182,168,0.5); 
    box-shadow: 0rem 1rem 2.5rem 0rem rgba(185,182,168,0.5);
    position: fixed; 
    bottom: 0;
    z-index: 10;
}
.selectSpecifications{
    min-height: 7rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-bottom: 3rem;
    padding-top: 7%;
    /* background-color: aquamarine; */
}
.skuInfoTitle{
    font-size: .7rem;
    color: #333;
    min-width: 23%;
    text-align: left;
    margin: 0 0 0 8.5%;
    display: inline-block;
    /* border: 1px solid red;; */
}
.specifications{
    /* border: 1px solid red; */
    text-align: left;
    /* border: 1px solid green; */
    display: flex;
    justify-content: space-between;
    margin-bottom: 4%;
    /* border: 1px solid purple; */
}
.specifications .selected{
    background-color: #E22319;
    color: #fff;
    border: 1px solid #E22319;
}
.all-specifications{
    width: 75%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: -1.5% 5% 0 -5%;
    /* border: 1px solid red; */
}
.all-specifications span{
    display: inline-block;
    border-radius: .4rem;
    padding: .3rem .8rem;
    margin: 1% 0 1% 5%;
    white-space:nowrap;
    font-size: .8rem;
    border: 1px solid #000;
}
.immutableCount span{
    border: none;
    background-color: #aaa;
    color: #000;
}
.confirmInfos{
    display: block;
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    background: linear-gradient(0deg,rgba(226,35,25,1),rgba(253,55,8,1));
    box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    color: #fff;
    font-size: 1.05rem;
    position: absolute;
    bottom: 0;
}
.skuInfos-enter-active{
    transform: translateY(0);
    transition: all .3s ease;
}
.skuInfos-leave-active{
    transform: translateY(100%);
    transition: all .3s ease;
}
.skuInfos-enter{
    transform: translateY(100%);
}
.skuInfos-leave{
    transform: translateY(0);
}
</style>